<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>豆瓣读书Top250分析</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
    <!-- https://fonts.google.com/specimen/Roboto -->
    <link rel="stylesheet" href="/static/css/fontawesome.min.css">
    <!-- https://fontawesome.com/ -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- https://getbootstrap.com/ -->
    <link rel="stylesheet" href="/static/css/templatemo-style.css">
    <script src="/static/js/echarts.min.js"></script>
    <!--
	Product Admin /static/css Template
	https://templatemo.com/tm-524-product-admin
	-->
</head>

<body id="reportsPage">
    <div class="" id="home">
        <nav class="navbar navbar-expand-xl">
            <div class="container h-100">
                <a class="navbar-brand" href="index">
                    <h1 class="tm-site-title mb-0">豆瓣读书Top250数据分析</h1>
                </a>
                <button class="navbar-toggler ml-auto mr-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars tm-nav-icon"></i>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto h-100">
                        <!--首页-->
                        <li class="nav-item">
                            <a class="nav-link active" href="index">
                                <i class="fas fa-tachometer-alt"></i>
                                首页
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <!--评论数据分析-->
                        <li class="nav-item">
                            <a class="nav-link" href="num">
                                 <i class="fas fa-tachometer-alt"></i>
                                评论数据分析
                            </a>
                        </li>
                        <!--词云数据分析-->
                        <li class="nav-item">
                            <a class="nav-link" href="wordcloud">
                                <i class="fas fa-cog"></i>
                                词云数据分析
                            </a>
                        </li>
                        <!--团队-->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                <i class="far fa-user"></i>
                                <span>
                                    团队 <i class="fas fa-angle-down"></i>
                                </span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="team">成员1</a>
                                <a class="dropdown-item" href="#">成员2</a>
                                <a class="dropdown-item" href="#">成员3</a>
                            </div>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link d-block" href="login">
                                管理员 <b>注销</b>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </nav>
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="text-white mt-5 mb-5">欢迎回来， <b>管理员</b></p>
                </div>
            </div>
            <!-- row -->
            <h2 class="tm-block-title">Top250 Score List</h2>
                    <div id="main" style="width: 100%;height:300px;"></div>
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        var option = {
                             color: ['#a957a9'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: {{score}},
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    barWidth: '60%',
                                    data:{{num}}
                                }
                            ]
                        };
                      // 使用刚指定的配置项和数据显示图表。
                     myChart.setOption(option);
                    </script>
            <div class="row tm-content-row">
                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
                    <div class="tm-bg-primary-dark tm-block">
                        <h2 class="tm-block-title">Score List</h2>
                         <div id="main1" style="width: 100%;height:300px;"></div>
                        <script type="text/javascript">
                        var chartDom = document.getElementById('main1');
                        var myChart = echarts.init(chartDom);
                        var option;

                        option = {
                            title: {
                                text: '评分分析',
                                subtext: '数据来源于网络',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                            },
                            series: [
                                {
                                    name: '评分及对应数量',
                                    type: 'pie',
                                    radius: '50%',
                                    data: [
                                        {value: {{num[0]}}, name:{{score[0]}}},
                                        {value: {{num[1]}}, name:{{score[1]}}},
                                        {value: {{num[2]}}, name:{{score[2]}}},
                                        {value: {{num[3]}}, name:{{score[3]}}},
                                        {value: {{num[4]}}, name:{{score[4]}}},
                                        {value: {{num[5]}}, name:{{score[5]}}},
                                        {value: {{num[6]}}, name:{{score[6]}}},
                                        {value: {{num[7]}}, name:{{score[7]}}},
                                        {value: {{num[8]}}, name:{{score[8]}}},
                                        {value: {{num[9]}}, name:{{score[9]}}},
                                        {value: {{num[10]}}, name:{{score[10]}}},
                                        {value: {{num[11]}}, name:{{score[11]}}},
                                        {value: {{num[12]}}, name:{{score[12]}}},
                                        {value: {{num[13]}}, name:{{score[13]}}}

                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                         myChart.setOption(option);
                    </script>
                    </div>
                </div>

                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
                    <div class="tm-bg-primary-dark tm-block tm-block-taller tm-block-overflow">
                        <h2 class="tm-block-title">Top250 List</h2>
                        <div class="tm-notification-items">
                            {% for book in books %}
                            <div class="media tm-notification-item">
                                <div class="media-body">
                                    <p class="mb-2"><b>《{{book[1]}}》</b>
                                        <a href="{{book[3]}}" class="tm-notification-link">图书链接</a></p>
                                    <p>{{book[10]}}</p>
                                    <span class="tm-small tm-text-color-secondary">{{book[6]}} &nbsp;&nbsp;&nbsp;{{book[7]}}</span>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="col-12 tm-block-col">
                    <div class="tm-bg-primary-dark tm-block tm-block-taller tm-block-scroll">
                        <h2 class="tm-block-title">Top250书单</h2>
                        <table class="table table-striped">
                             <thead>
                                <tr>
                                    <th scope="col">排名</th>
                                    <th scope="col">图书名称</th>
                                    <th scope="col">评分</th>
                                    <th scope="col">图书链接</th>
                                    <th scope="col">作者/译者</th>
                                    <th scope="col">出版社</th>
                                    <th scope="col">出版时间</th>
                                    <th scope="col">售价</th>
                                    <th scope="col">评论人数</th>
                                    <th scope="col">简要介绍</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for book in books %}
                            <tr>
                                <td>
                                    <div class="tm-status-circle moving">
                                    </div>{{book[0]}}
                                </td>
                                <td>{{book[1]}}</td>
                                <td>{{book[2]}}</td>
                                <td>{{book[3]}}</td>
                                <td>{{book[5]}}</td>
                                <td>{{book[6]}}</td>
                                <td>{{book[7]}}</td>
                                <td>{{book[8]}}</td>
                                <td>{{book[9]}}</td>
                                <td>{{book[10]}}</td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <footer class="tm-footer row tm-mt-small">
            <div class="col-12 font-weight-light">
                <p class="text-center text-white mb-0 px-4 small">
                    Copyright &copy; <b>2021</b> All rights reserved.
                    
                    Design: <a rel="nofollow noopener" href="https://templatemo.com" class="tm-footer-link">Template Mo</a>
                </p>
            </div>
        </footer>
    </div>

    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <!-- https://jquery.com/download/ -->
    <script src="/static/js/moment.min.js"></script>
    <!-- https://momentjs.com/ -->
    <script src="/static/js/Chart.min.js"></script>
    <!-- http://www.chartjs.org/docs/latest/ -->
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- https://getbootstrap.com/ -->
    <script src="/static/js/tooplate-scripts.js"></script>
    <script>
        Chart.defaults.global.defaultFontColor = 'white';
        let ctxLine,
            ctxBar,
            ctxPie,
            optionsLine,
            optionsBar,
            optionsPie,
            configLine,
            configBar,
            configPie,
            lineChart;
        barChart, pieChart;
        // DOM is ready
        $(function () {
            drawLineChart(); // Line Chart
            drawBarChart(); // Bar Chart
            drawPieChart(); // Pie Chart

            $(window).resize(function () {
                updateLineChart();
                updateBarChart();                
            });
        })
    </script>
</body>

</html>